<template>
    <div class="container">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="文件地址">
                <el-input v-model="form.url" style="width: 300px" />
            </el-form-item>
            <div class="line">
                <el-form-item label="开启背景">
                    <el-switch v-model="isShowBg" />
                </el-form-item>
                <el-form-item label="开启边框">
                    <el-switch v-model="isShowBd" />
                </el-form-item>
            </div>
            <div class="line">
                <el-form-item label="文字颜色">
                    <el-color-picker v-model="color" show-alpha size="large" />
                </el-form-item>
                <el-form-item label="背景颜色">
                    <el-color-picker v-model="background" show-alpha size="large" />
                </el-form-item>
                <el-form-item label="边框颜色">
                    <el-color-picker v-model="borderColor" show-alpha size="large" />
                </el-form-item>
            </div>

            <el-form-item label="页码">
                <el-input-number v-model="form.pageNum" />
            </el-form-item>
            <el-form-item label="每页字数">
                <el-input-number v-model="form.pageSize" />
            </el-form-item>
            <el-form-item label="总页数">
                <el-input-number v-model="form.total" disabled />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" style="width: 100%;" @click="onSubmit">保存</el-button>
            </el-form-item>
            <div style="width: 100%;font-size: 12px;text-align: center;color: #999">❗选择颜色记得点“ok”</div>
        </el-form>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const form = ref({
    url: '',
    pageNum: 0,
    pageSize: 0,
    total: 0,
    color: '#333'
})
const isShowBg = ref(false)
const isShowBd = ref(true)
const color = ref('#333')
const background = ref('none')
const borderColor = ref('#333')

const onSubmit = () => {
    form.value.color = color.value;
    if (isShowBg.value) {
        form.value.background = background.value;
    } else {
        form.value.background = 'none';
    }
    if (isShowBd.value) {
        form.value.border = `1px solid ${borderColor.value}`;
    } else {
        form.value.border = 'none';
    }
    console.log('form.value', form.value);
    window.electron.ipcRenderer.send('setConfig', JSON.stringify(form.value))
}
onMounted(() => {
    // window.electron.ipcRenderer.send('getConfig', JSON.stringify(form.value))
    // window.electron.ipcRenderer.on('config', (event, arg) => {
    //     form.value = JSON.parse(arg);
    //     color.value = form.value.color;
    // });
    window.electron.ipcRenderer.send('showSetting')

})
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    padding: 10px 20px;
    font-size: 18px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .line {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
}
</style>